<template>
	<view class="sales_details">
		<u-navbar title="退款详情" :border-bottom="false"></u-navbar>
		<view class="msg">
			<view class="info">
				<view class="title">
					<view class="l">订单号：9823749875987987</view>
					<view class="r">待核销/自提</view>
				</view>
				<view v-for="index in 1" :key="index" class="itm">
					<shopInfo></shopInfo>
				</view>
				<view class="tips">
					<view class="l">退款份数</view>
					<view class="r"><u-number-box v-model="value" :min="1" :max="100"></u-number-box></view>
				</view>
				<view class="tips">
					<view class="l">退款金额</view>
					<view class="r c">￥99.90</view>
				</view>
				<view class="tips">
					<view class="l">退款方式</view>
					<view class="r">原路退回</view>
				</view>
				<view>
					<timelineItem v-for="(item, index) in list" :key="index" :list="list" :index="index">
						<view class="tripItem">
							<view class="u-order-title">平台审核中/平台拒绝退款/平台同意退款</view>
							<view class="u-order-desc">申请说明：不满意</view>
							<view class="u-order-time">2021/11/22 16:20:36</view>
						</view>
					</timelineItem>
				</view>
				<view class="btn_box">
					<view class="bti1">拒绝退款</view>
					<view class="bti2">同意退款</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center">
			<view class="pro_box">
				<view class="box1">拒绝退款</view>
				<view class="textarea_box">
					<textarea maxlength="300" placeholder="请填写拒绝缘由" class="textarea_box_i"></textarea>
				</view>
				<view class="b_r">
					<view class="b_r1">取消</view>
					<view class="b_r2">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import shopInfo from '@/components/shopInfo.vue';
import timelineItem from '@/components/chenbin-timeline/timelineItem.vue';
export default {
	components: {
		shopInfo,
		timelineItem
	},
	data() {
		return {
			show: true,
			list: [1, 2, 3, 4],
			value: 1
		};
	}
};
</script>

<style lang="scss">
.sales_details {
	height: 100vh;
	background: rgba(245, 245, 245, 1);
	position: relative;
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.msg {
		.info {
			width: 702rpx;
			height: 80vh;
			overflow-y: scroll;
			border-radius: 10rpx;
			background: rgb(255, 255, 255);
			margin: 20rpx auto;
			padding: 30rpx 32rpx;
			box-sizing: border-box;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				padding-bottom: 30rpx;
				.l {
					color: rgba(51, 51, 51, 1);
				}
				.r {
					color: rgb(153, 153, 153);
				}
			}
			.tips {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				box-sizing: border-box;
				.l {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
				.r {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					display: flex;
					align-items: center;
				}
				.c {
					color: rgba(246, 83, 50, 1);
				}
			}
		}
	}
	.u-order-title {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
	.u-order-desc {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(119, 119, 119, 1);
		margin-top: 10rpx;
	}
	.u-order-time {
		font-size: 22rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 10rpx;
	}
	.btn_box {
		display: flex;
		.bti1 {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
			background: rgba(255, 143, 82, 1);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
		.bti2 {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
			background: rgba(255, 67, 73, 1);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}
	.pro_box {
		padding: 28rpx;
		text-align: center;
		.box1 {
			font-size: 36rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
		.textarea_box {
			margin: 20rpx 0;
			width: 516rpx;
			height: 200rpx;
			border-radius: 10rpx;
			background: rgba(204, 204, 204, 0.3);
			border-radius: 10rpx;
			padding: 10rpx;
			text-align: left;
			.textarea_box_i {
				width: 100%;
				height: 100%;
				overflow: scroll;
			}
		}
		.b_r {
			display: flex;
			.b_r1 {
				width: 50%;
				padding: 16rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(84, 84, 84, 1);
			}
			.b_r2 {
				width: 50%;
				padding: 16rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(84, 84, 84, 1);
			}
		}
	}
}
</style>
